<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/resoures/font-awesome-4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="/online-class/css/public.css" />
    <link rel="stylesheet" href="/online-class/css/index.css" />
    <link rel="stylesheet" href="/online-class/css/" />
    <title>header</title>
</head>

<body>
    <header>
        <div class="hole-div">
            <div class="top">
                <div class="top-address">
                    <i class="fa fa-map-marker"></i> 云南省昆明市呈贡区
                    <i class="fa fa-caret-down"></i>
                </div>
                <div class="top-search">
                    <div class="search-div">
                        <i class="fa fa-search">搜索商家名称、商品名称</i>
                    </div>
                </div>
            </div>
            <div class="mid">
                <ul class="mid-list-ul">
                    <li>
                        <img src="/resoures/images/白菜.png" alt="" />
                        <p>美食</p>
                    </li>
                    <li>
                        <img src="/resoures/images/面包.png" alt="" />
                        <p>早餐</p>
                    </li>
                    <li>
                        <img src="/resoures/images/跑腿APP.png" alt="" />
                        <p>跑腿代购</p>
                    </li>
                    <li>
                        <img src="/resoures/images/汉堡包.png" alt="" />
                        <p>汉堡披萨</p>
                    </li>
                    <li>
                        <img src="/resoures/images/奶茶.png" alt="" />
                        <p>甜品饮料</p>
                    </li>
                    <li>
                        <img src="/resoures/images/简餐速食.png" alt="" />
                        <p>速食简餐</p>
                    </li>
                    <li>
                        <img src="/resoures/images/沙拉.png" alt="" />
                        <p>地方小吃</p>
                    </li>
                    <li>
                        <img src="/resoures/images/面.png" alt="" />
                        <p>米粉面馆</p>
                    </li>
                    <li>
                        <img src="/resoures/images/包子.png" alt="" />
                        <p>包子粥铺</p>
                    </li>
                    <li>
                        <img src="/resoures/images/炸鸡.png" alt="" />
                        <p>炸鸡炸串</p>
                    </li>
                </ul>
                <div class="mid-setmenu">
                    <div class="mid-setmenu-text">
                        <p class="p0">品质套餐</p>
                        <p class="p1">搭配齐全吃得好</p>
                        <p class="p2">立即抢购&nbsp;&rsaquo;</p>
                    </div>
                    <img src="/resoures/images/社恐的12种形态-宇航员.png" alt="烤串" />
                </div>
                <div class="mid-vip">
                    <div class="mid-vip-text">
                        <img src="/resoures/images/皇冠.png" alt="" />
                        <p class="t1">超级会员</p>
                        <p class="t2">&#8226;</p>
                        <p class="t3">每月享超值权益</p>
                    </div>
                    <div class="mid-vip-open">立即开通&nbsp;&rsaquo;</div>
                </div>
                <div class="mid-show">
                    <div class="mid-show-line"></div>
                    <div class="mid-show-text">推荐商家</div>
                    <div class="mid-show-line"></div>
                </div>
                <div class="mid-select">
                    <div class="mid-select-s1">
                        <div>
                            综合排序
                            <i class="fa fa-chevron-down"></i>
                        </div>
                    </div>
                    <div class="mid-select-s2">
                        <div>距离最近</div>
                    </div>
                    <div class="mid-select-s3">
                        <div>销量最高</div>
                    </div>
                    <div class="mid-select-s4">
                        <div>
                            筛选
                            <i class="fa fa-filter"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="bottom-info">
                    <div class="info-img">
                        <img src="/resoures/images/付款.png" alt="饺子" />
                    </div>
                    <div class="info-text">
                        <div class="text-t1">
                            <p class="t1-front">万家饺子（软件园E18店）</p>
                            <div class="t1-icon-bgd">
                                <div class="t1-icon-point"></div>
                            </div>
                        </div>
                        <div class="text-t2">
                            <div class="t2-front">
                                <i class="fa fa-star"></i><i class="fa fa-star"></i
                  ><i class="fa fa-star"></i><i class="fa fa-star"></i
                  ><i class="fa fa-star"></i>
                                <p class="p1">4.9</p>
                                <p class="p2">月售345单</p>
                            </div>
                            <div class="t2-shopicon">蜂鸟专送</div>
                        </div>
                        <div class="text-t3">
                            <p class="t3-front">￥15起送 | ￥3配送</p>
                            <p class="t3-back">3.22km | 30分钟</p>
                        </div>
                        <div class="text-t4">各种饺子</div>
                        <div class="text-t5">
                            <div class="t5-front">
                                <div class="front-img">新</div>
                                <p class="front-text">饿了么新用户首单立减9元</p>
                            </div>
                            <div class="t5-back">
                                2个活动<i class="fa fa fa-caret-down"></i>
                            </div>
                        </div>
                        <div class="t6-text">
                            <div class="t6-front">
                                <div class="front-img">特</div>
                                <p class="front-text">特价商品5元起</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <ul class="bnav">
                <li>
                    <img src="/resoures/images/首页.png" alt="" />
                    <p>首页</p>
                </li>
                <li>
                    <img src="/resoures/images/浏览.png" alt="" />
                    <p>发现</p>
                </li>
                <li>
                    <img src="/resoures/images/订单.png" alt="" />
                    <p>订单</p>
                </li>
                <li>
                    <img src="/resoures/images/我的.png" alt="" />
                    <p>我的</p>
                </li>
            </ul>
        </div>
    </header>
</body>

</html>